{% extends "admin/index.html" %}
{% load i18n static %}

{% block content %}
<!-- 超级管理员专用仪表板 -->
<div class="dashboard">
    {% if statistics %}
    <div class="dashboard-stats">
        <h2 style="color: #417690; margin-bottom: 20px;">📊 系统概览</h2>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
            <div class="stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 10px; text-align: center;">
                <h3 style="margin: 0; font-size: 2em;">{{ statistics.total_users }}</h3>
                <p style="margin: 5px 0 0 0; opacity: 0.9;">总用户数</p>
            </div>

            <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 10px; text-align: center;">
                <h3 style="margin: 0; font-size: 2em;">{{ statistics.total_products }}</h3>
                <p style="margin: 5px 0 0 0; opacity: 0.9;">总产品数</p>
            </div>

            <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 20px; border-radius: 10px; text-align: center;">
                <h3 style="margin: 0; font-size: 2em;">{{ statistics.total_orders }}</h3>
                <p style="margin: 5px 0 0 0; opacity: 0.9;">总订单数</p>
            </div>

            <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; padding: 20px; border-radius: 10px; text-align: center;">
                <h3 style="margin: 0; font-size: 2em;">{{ statistics.vip_users }}</h3>
                <p style="margin: 5px 0 0 0; opacity: 0.9;">VIP用户</p>
            </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
            <div class="stat-card" style="background: #28a745; color: white; padding: 15px; border-radius: 8px; text-align: center;">
                <h4 style="margin: 0;">{{ statistics.active_products }}</h4>
                <p style="margin: 5px 0 0 0; font-size: 14px;">在售产品</p>
            </div>

            <div class="stat-card" style="background: #17a2b8; color: white; padding: 15px; border-radius: 8px; text-align: center;">
                <h4 style="margin: 0;">{{ statistics.total_categories }}</h4>
                <p style="margin: 5px 0 0 0; font-size: 14px;">产品分类</p>
            </div>

            <div class="stat-card" style="background: #ffc107; color: white; padding: 15px; border-radius: 8px; text-align: center;">
                <h4 style="margin: 0;">{{ statistics.total_brands }}</h4>
                <p style="margin: 5px 0 0 0; font-size: 14px;">品牌数量</p>
            </div>

            <div class="stat-card" style="background: #dc3545; color: white; padding: 15px; border-radius: 8px; text-align: center;">
                <h4 style="margin: 0;">{{ statistics.pending_orders }}</h4>
                <p style="margin: 5px 0 0 0; font-size: 14px;">待处理订单</p>
            </div>
        </div>
    </div>
    {% endif %}

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
        <!-- 快速操作 -->
        <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #007bff;">
            <h3 style="color: #007bff; margin-bottom: 15px;">🚀 快速操作</h3>
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <a href="{% url 'super_admin:products_product_add' %}" style="display: inline-block; padding: 8px 15px; background: #28a745; color: white; text-decoration: none; border-radius: 5px;">➕ 添加新产品</a>
                <a href="{% url 'super_admin:orders_order_changelist' %}?status__exact=pending" style="display: inline-block; padding: 8px 15px; background: #ffc107; color: white; text-decoration: none; border-radius: 5px;">📋 查看待处理订单</a>
                <a href="{% url 'super_admin:core_customuser_changelist' %}?is_vip__exact=1" style="display: inline-block; padding: 8px 15px; background: #17a2b8; color: white; text-decoration: none; border-radius: 5px;">👑 管理VIP用户</a>
            </div>
        </div>

        <!-- 管理工具 -->
        <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; border-left: 4px solid #6c757d;">
            <h3 style="color: #6c757d; margin-bottom: 15px;">🛠️ 管理工具</h3>
            <div style="display: flex; flex-direction: column; gap: 10px;">
                <a href="{% url 'super_admin:reports' %}" style="display: inline-block; padding: 8px 15px; background: #6f42c1; color: white; text-decoration: none; border-radius: 5px;">📊 数据报表</a>
                <a href="{% url 'super_admin:analytics' %}" style="display: inline-block; padding: 8px 15px; background: #e83e8c; color: white; text-decoration: none; border-radius: 5px;">📈 数据分析</a>
                <a href="/" style="display: inline-block; padding: 8px 15px; background: #20c997; color: white; text-decoration: none; border-radius: 5px;">🏠 返回首页</a>
            </div>
        </div>
    </div>

    <style>
    .dashboard-stats .stat-card:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
    }
    </style>
</div>

<!-- 调用父模板的内容显示标准的应用列表 -->
{{ block.super }}
{% endblock %}
